import React, { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router';
// import dayjs from 'dayjs';
import { Card, Form, Input, Radio, DatePicker, Upload, Button, Flex, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const WaiterEdit = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const params = useParams();

    const handleCancel = () => {
        navigate(-1);
    };

    const handleSubmit = () => {
        // eslint-disable-next-line no-console
        console.log(form.getFieldsValue());
    };

    const getFormData = (id) => {
        // eslint-disable-next-line no-console
        console.log(id);
    };

    useEffect(() => {
        if (params?.id) {
            getFormData(params?.id);
        }

        return () => {
            form.resetFields();
        };
    }, []);

    return (
        <Card title="编辑">
            <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                style={{ maxWidth: 600 }}
            >
                <Form.Item label="姓名" name="name">
                    <Input />
                </Form.Item>
                <Form.Item label="性别" name="gender">
                    <Radio.Group>
                        <Radio value="male"> 男 </Radio>
                        <Radio value="female"> 女 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="生日" name="birth">
                    <DatePicker format="YYYY/MM/DD" />
                </Form.Item>
                <Form.Item label="联系电话" name="phone">
                    <Input />
                </Form.Item>
                <Form.Item label="联系地址" name="address">
                    <Input />
                </Form.Item>

                <Form.Item
                    label="头像"
                    valuePropName="fileList"
                >
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="备注">
                    <Input.TextArea rows={4} />
                </Form.Item>
                <Flex justify="flex-end">
                    <Space>
                        <Button onClick={handleCancel}>取消</Button>
                        <Button onClick={handleSubmit} type="primary">确定</Button>
                    </Space>
                </Flex>
            </Form>
        </Card>
    );
};
export default WaiterEdit;
